<template >
  <dv-border-box-11 title="监测数据可视化平台"  :reverse="true " id="dataview" style="padding: 8px;">
    <dv-decoration-2 style="width:800px;height:8px;padding: 20px;" />
    <div class="clearfix">
      <q-btn flat class="title_1" style="" label="数据分析"  />
      <q-btn flat class="title_2" style="" label="数据分析"  />
      <q-btn flat class="title_2" style="margin-left: 13.3%" label="数据分析"  />
      <dv-border-box-9>
      <q-btn flat class="title_1"  v-bind:label="date"  />
      </dv-border-box-9>
    </div>
    <diV>
      <DataViewA1 class="A"></DataViewA1>
      <DataViewA2 class="A"></DataViewA2>
      <div class="A">
      <DataViewA3></DataViewA3>
      </div>
    </diV>
  </dv-border-box-11>
</template>

<script>
import DataViewA1 from "@/components/View/DataViewA1";
import DataViewA2 from "@/components/View/DataViewA2";
import DataViewA3 from "@/components/View/DataViewA3";
export default {
  name: "DataView",
  components:{DataViewA3, DataViewA1,DataViewA2},
  data(){
    return {
      sectionId:'',
      date:''
    }
  },
  created() {
    this.getsectionId();
  },
  methods: {
    getsectionId() {
      this.sectionId = this.$route.query.mallCode;
    },
    getTime:function(){
      let yy = new Date().getFullYear();
      let mm = new Date().getMonth()+1;
      let dd = new Date().getDate();
      let hh = new Date().getHours();
      let mf = new Date().getMinutes()<10 ? '0'+new Date().getMinutes() : new Date().getMinutes();
      let ss = new Date().getSeconds()<10 ? '0'+new Date().getSeconds() : new Date().getSeconds();
      let wk = new Date().getDay()
      let weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
      let week = weeks[wk]
      this.date= yy+'-'+mm+'-'+dd+' '+hh+':'+mf+':'+ss+' '+week;
    },
    currentTime(){
      setInterval(this.getTime,500)
    },
  },
  mounted() {
    this.currentTime()
  }


}
</script>

<style scoped>
  #dataview{
    background: url("../../assets/img/Beijing.jpg") no-repeat fixed center center;
    height: 100%;
    background-size:100% 100%;
  }
  .title_1{
    color:#FFFFFF ;
    background-color: #7FD0C3;
    line-height: 30px;
    font-size:20px;
    font-family: 黑体;
    width:25%;
    margin-left: 20px;
    margin-top: 12px;
    float: left;

  }
  .title_2{
    color:#FFFFFF ;
    background-color: #7FD0C3;
    line-height: 30px;
    font-size:20px;
    font-family: 黑体;
    width:16%;
    margin-left: 20px;
    margin-top: 12px;
    float: left;

  }
  .A{
    width: 16%;
    height: 20%;
    margin-left: 20px;
    margin-top: 1%;
    float: left;
  }
  .clearfix:after{
    content:"";  /*设置内容为空*/
    height:0;  /*高度为0*/
    line-height:0;  /*行高为0*/
    display:block;  /*将文本转为块级元素*/
    visibility:hidden;  /*将元素隐藏*/
    clear:both;  /*清除浮动*/
  }
  canvas{
    margin: 5px !important;
  }
</style>
